<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import type { TableColumnCtx } from 'element-plus'
//table-list
const tableHeight = ref(0)
// 定义表格数据的类型
interface TableRow {
    id: number;
    time: string;
    name: string;
    name1: string;
}
const listTableData = ref<any>([])

//table 合并
interface User {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}
interface SpanMethodProps {
    row: User
    column: TableColumnCtx<User>
    rowIndex: number
    columnIndex: number
}

// 新增
const addDialogVisible = ref(false)
const addForm = ref({
    multibeltGroup: '',
    multibeltName: '',
    multibeltNo: '',
    direction: '', //皮带秤方向 0入 1出
    status: '' //当前状态（0 停止 1 运行 2 故障 3检修 ）
})

// 修改
const editDialogVisible = ref(false)

const editForm = ref<any>({
    multibeltGroup: '',
    multibeltName: '',
    multibeltNo: '',
    direction: '', //皮带秤方向 0入 1出
    status: '' //当前状态（0 停止 1 运行 2 故障 3检修 ）
})

import { MultibeltMsgList, addMultibeltMsg, delMultibeltMsg, editMultibeltMsg, MultibeltMsgInfo, DictDataType, MultibeltMsgGroupList } from "@/api";
const dataType = ref<any>([])
const getDictDataType = (name:any) => {
    DictDataType(name).then(res=>{
        //console.log('字典----',res.data)
        dataType.value = res.data
    })
}

// 搜索
const searchForm = ref({
    multibeltName: '',
    direction: '',
    status: '',

    // PageNum: 1, //当前页码
    // PageSize: 10 //PageSize
})
const totalPage = ref(0)

const searchFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    //searchForm.value.PageNum = 1
    postMultibeltMsgList()
}


//list
const postMultibeltMsgList = () => {
    //console.log('searchForm-------',searchForm.value)
    MultibeltMsgGroupList(searchForm.value).then(res=>{
        console.log('list-------a',res.data.result)
        listTableData.value = res.data

        // totalPage.value =  res.data.totalNum
    })
}

const postMultibeltMsgGroupList = () => {
    //console.log('searchForm-------',searchForm.value)
    MultibeltMsgGroupList(searchForm.value).then(res=>{
        console.log('list-------a',res.data)
        listTableData.value = res.data
        // totalPage.value =  res.data.totalNum
    })
}

//新增
const postAddMultibeltMsg = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            addMultibeltMsg(addForm.value).then(res=>{
                console.log('新增----',res)
                if(res.code === 200){
                    ElMessage({
                        type: 'success',
                        message: '添加成功',
                    })
                    addDialogVisible.value = false
                    addForm.value = {
                        multibeltGroup: '',
                        multibeltName: '',
                        multibeltNo: '',
                        direction: '', //皮带秤方向 0入 1出
                        status: '' //当前状态（0 停止 1 运行 2 故障 3检修 ）
                    }
                    postMultibeltMsgList()
                }
                else{
                    ElMessage.error(res.msg)
                }
            })
        } else {
        console.log('error submit!', fields)
        }
    })
    
}

//修改
const postEditMultibeltMsg = () => {
    editMultibeltMsg(editForm.value).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            editDialogVisible.value = false
            postMultibeltMsgList()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

// 详情 
const getMultibeltMsgInfo = (id:number) => {
    MultibeltMsgInfo(id).then(res=>{
        console.log('详情----',res.data)
        editForm.value = res.data
        editDialogVisible.value = true
    })
}


// 删除
const clickDelMultibeltMsg = (id:number) => {
    ElMessageBox.confirm(
        '是否确定删除，删除后不能恢复?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
    .then(() => {
        delMultibeltMsg(id).then(res=>{
            console.log('删除----',res)
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                postMultibeltMsgList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    })
}

const ruleFormRef = ref<FormInstance>()
const rules = ref({
    multibeltGroup: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    multibeltName: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    multibeltNo: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    direction: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    status: [
        { required: true, message: '请选择', trigger: 'change' },
    ]
})
const resetAddForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
//resetAddForm(ruleFormRef)

onMounted(() => {
    // 获取页面高度
    tableHeight.value = window.innerHeight - 310;
    getDictDataType('multibelt_group')
    postMultibeltMsgList()
});


</script>
<template>
    <!-- 弹出框/新增 -->
    <el-dialog v-model="addDialogVisible" title="新增皮带秤" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form ref="ruleFormRef" :rules="rules" :inline="true" :model="addForm" class="mt15 form-inline-row-two" label-width="105">
                <el-form-item label="皮带秤组:" prop="multibeltGroup">
                    <el-select v-model="addForm.multibeltGroup" placeholder="请选择">
                        <el-option v-for="item in dataType" :label="item.dictLabel" :value="item.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="皮带秤名称:" prop="multibeltName">
                    <el-input v-model="addForm.multibeltName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="皮带秤编码:" prop="multibeltNo">
                    <el-input v-model="addForm.multibeltNo" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="皮带秤方向:" prop="direction">
                    <el-select v-model="addForm.direction" placeholder="请选择">
                        <el-option label="入" value="0" />
                        <el-option label="出" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="皮带秤状态:" prop="status">
                    <el-select v-model="addForm.status" placeholder="请选择">
                        <el-option label="停止" value="0" />
                        <el-option label="运行" value="1" />
                        <el-option label="故障" value="2" />
                        <el-option label="检修" value="3" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="postAddMultibeltMsg(ruleFormRef)">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/修改 -->
    <el-dialog v-model="editDialogVisible" title="修改皮带秤组" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form :inline="true" :model="editForm" class="mt15 form-inline-row-two" label-width="105">
                <el-form-item label="皮带秤组:">
                    <el-select v-model="editForm.multibeltGroup" placeholder="请选择">
                        <el-option v-for="item in dataType" :label="item.dictLabel" :value="item.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="皮带秤名称:">
                    <el-input v-model="editForm.multibeltName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="皮带秤编码:">
                    <el-input v-model="editForm.multibeltNo" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="皮带秤方向:">
                    <el-select v-model="editForm.direction" placeholder="请选择">
                        <el-option label="入" value="0" />
                        <el-option label="出" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="皮带秤状态:">
                    <el-select v-model="editForm.status" placeholder="请选择">
                        <el-option label="停止" value="0" />
                        <el-option label="运行" value="1" />
                        <el-option label="故障" value="2" />
                        <el-option label="检修" value="3" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="postEditMultibeltMsg">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>

    <div class="search_bor_bg">
        <el-form ref="searchFormRef" :inline="true" :model="searchForm" class="from_search_inline" label-width="90">
            <el-form-item label="皮带秤名称:" prop="multibeltName">
                <el-input v-model="searchForm.multibeltName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="皮带秤方向:" prop="direction">
                <el-select v-model="searchForm.direction" placeholder="请选择">
                    <el-option label="入" value="0" />
                    <el-option label="出" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="皮带秤状态:" prop="status">
                <!-- 0 停止 1 运行 2 故障 3检修 -->
                <el-select v-model="searchForm.status" placeholder="请选择">
                    <el-option label="停止" value="0" />
                    <el-option label="运行" value="1" />
                    <el-option label="故障" value="2" />
                    <el-option label="检修" value="3" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" color="#2565C8" @click="postMultibeltMsgList">搜索</el-button>
                <el-button style="padding:0 8px;" @click="resetForm(searchFormRef)">
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="box_bg mt15">
        <div class="record_set">
            <el-button type="primary" color="#2565C8" @click="addDialogVisible = true,resetAddForm(ruleFormRef)">新增皮带秤</el-button>
        </div>
        <div class="table_list mt15 ">
            <!-- <el-table
                :data="listTableData"
                size="large" :border="true" :stripe="false" :highlight-current-row="false"
                :span-method="objectSpanMethod"
                :height="tableHeight"
                header-cell-class-name="table_th"
                >
                <el-table-column prop="index" label="皮带秤组编码" width="180" align="center" />
                <el-table-column prop="multibeltGroup" label="皮带秤组名称" align="center" />
                <el-table-column prop="multibeltNo" label="皮带称编码" align="center" />
                <el-table-column prop="multibeltName" label="皮带秤名称" align="center"  />
                <el-table-column label="皮带秤方向" prop="direction" align="center" >
                    <template #default="props">
                        <span v-if="props.row.direction == 0">入</span>
                        <span v-if="props.row.direction == 1">出</span>
                    </template>
                </el-table-column>
                <el-table-column label="当前状态" prop="status" align="center" >
                    <template #default="props">
                        <span v-if="props.row.status == 0">停止</span>
                        <span v-if="props.row.status == 1">运行</span>
                        <span v-if="props.row.status == 2">故障</span>
                        <span v-if="props.row.status == 3">检修</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="120" align="center">
                    <template #default="scope">
                        <div class="table_btn">
                            <a href="javascript:;" @click="clickDelMultibeltMsg(scope.row.id)">删除</a>|
                            <a href="javascript:;" @click="getMultibeltMsgInfo(scope.row.id)">修改</a>
                        </div>
                    </template>
                </el-table-column>
            </el-table> -->
            
            <div class="">
                <table class="rowcol_table" style="width: 100%;">
                    <colgroup>
                        <col width="14%">
                        <col width="14%">
                        <col width="14%">
                        <col width="14%">
                        <col width="14%">
                        <col width="14%">
                        <col width="14%">
                    </colgroup>
                    <tr>
                        <th>皮带秤组编码</th>
                        <th>皮带秤组名称</th>
                        <th>皮带称编码</th>
                        <th>皮带秤名称</th>
                        <th>皮带秤方向</th>
                        <th>当前状态</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="item in listTableData">
                        <td>{{ item.index }}</td>
                        <td>{{ item.scaleGroupName }}</td>
                        <td colspan="5">
                            <table style="width: 100%;">
                                <colgroup>
                                    <col width="20%">
                                    <col width="20%">
                                    <col width="20%">
                                    <col width="20%">
                                    <col width="20%">
                                </colgroup>
                                <tr v-for="(itema,index) in item.items" :class="index== 0?'':'bor_up'" >
                                    <td>{{ itema.multibeltNo }}</td>
                                    <td class="bor_left">{{ itema.multibeltName }}</td>
                                    <td class="bor_left">
                                        <span v-if="itema.direction == 0">入</span>
                                        <span v-if="itema.direction == 1">出</span>
                                    </td>
                                    <td class="bor_left">
                                        <span v-if="itema.status == 0">停止</span>
                                        <span v-if="itema.status == 1">运行</span>
                                        <span v-if="itema.status == 2">故障</span>
                                        <span v-if="itema.status == 3">检修</span>
                                    </td>
                                    <td class="bor_left">
                                        <div class="table_btn">
                                            <a href="javascript:;" @click="clickDelMultibeltMsg(itema.id)">删除</a>|
                                            <a href="javascript:;" @click="getMultibeltMsgInfo(itema.id)">修改</a>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
            <!--
            <el-table :data="listTableData" size="large" :border="true" :stripe="false" :highlight-current-row="false"
                :height="tableHeight" style="width: 100%;" header-cell-class-name="table_th"
                 ref="multipleTableRef">
                 <el-table-column type="expand">
                    <template #default="props">
                        <el-table :data="props.row.items">
                            <el-table-column label="皮带称编码" prop="multibeltNo" align="center" ></el-table-column>
                            <el-table-column label="皮带秤名称" prop="multibeltName" align="center" />
                            <el-table-column label="皮带秤方向" prop="direction" align="center" >
                                <template #default="itemsProps">
                                    <span v-if="itemsProps.row.direction == 0">入</span>
                                    <span v-if="itemsProps.row.direction == 1">出</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="当前状态" prop="status" align="center" >
                                <template #default="itemsProps">
                                    <span v-if="itemsProps.row.status == 0">停止</span>
                                    <span v-if="itemsProps.row.status == 1">运行</span>
                                    <span v-if="itemsProps.row.status == 2">故障</span>
                                    <span v-if="itemsProps.row.status == 3">检修</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" min-width="120" align="center">
                                <template #default="scope">
                                    <div class="table_btn">
                                        <a href="javascript:;" @click="clickDelMultibeltMsg(scope.row.id)">删除</a>|
                                        <a href="javascript:;" @click="getMultibeltMsgInfo(scope.row.id)">修改</a>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="皮带秤组编码" prop="index" align="center" />
                <el-table-column label="皮带秤组名称" prop="scaleGroupName" align="center" />
            </el-table>
            -->
        </div>
        <!-- <div class="pagination">
            <el-pagination v-model:current-page="searchForm.PageNum" v-model:page-size="searchForm.PageSize" @current-change="postMultibeltMsgList" :total="totalPage" layout="prev, pager, next" />
        </div> -->

    </div>

</template>
<style scoped lang="scss"></style>
